<template>
  <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
    <el-card shadow="always">
      <el-container>
        <el-aside>
          <MemberMenu/>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="24">
              <el-table
                  v-if="orderData.length > 0"
                  v-loading="loading"
                  :data="orderData"
                  style="width: 100%"
                  :default-sort="{ prop: 'createTime', order: 'descending' }"
              >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="订单流水号">
                        <span>{{ props.row.dataId.split(":")[2] }}</span>
                      </el-form-item>
                      <el-form-item label="总价格">
                        <span>{{ props.row.order.price + "元" }}</span>
                      </el-form-item>
                      <el-form-item
                          label="乘客信息"
                      >
                        <div v-for="(passenger,index) in props.row.passengers" :key="passenger.dataId">
                          <span style="font-weight: bold">{{ "乘客" + (index + 1) + "" }}</span><br>
                          <span>舱位：{{ flightClassFormatter(passenger.flightClass) + " " }}</span>
                          <span>票价：{{ passenger.price + "元 " }}</span>
                          <span>机建燃油费：{{ passenger.taxation + "元 " }}</span>
                        </div>
                      </el-form-item>

                      <el-form-item label="航班信息">
                        <span>起飞地：{{ props.row.flightSchedule.startStationDisplay }}</span><br>
                        <span>目的地：{{ props.row.flightSchedule.endStationDisplay }}</span><br>
                        <span>航班号：{{ props.row.flightSchedule.flightNumber }}</span><br>
                        <span>起飞时间：{{ dateTimeFormatter(props.row.flightSchedule.flightSchedule.startTime) }}</span><br>
                        <span>到达时间：{{ dateTimeFormatter(props.row.flightSchedule.flightSchedule.endTime) }}</span><br>
                        <span>机型：{{
                            aircraftModelFormatter(props.row.flightSchedule.flightInfo.aircraftModel)
                          }}</span><br>
                        <span>总时长：{{ props.row.flightSchedule.flightSchedule.duration + "分钟" }}</span><br>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>

                <el-table-column
                    label="订单流水号"
                    prop="dataId">
                  <template slot-scope="scope">
                    <span>{{ scope.row.dataId.split(":")[2] }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="乘机人数"
                    width="100px"
                >
                  <template slot-scope="scope">
                    {{ scope.row.passengers.length }}
                  </template>
                </el-table-column>
                <el-table-column
                    label="总价"
                    prop="order.price"
                    width="100px"
                >
                </el-table-column>
                <el-table-column sortable prop="createTime" label="订单创建时间">
                  <template slot-scope="scope">
                    <span>{{ dateTimeFormatter(scope.row.order.createTime.substring(0, 19)) }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                >
                  <template slot-scope="scope">
                <span v-if="scope.row.order.chargebackStatus == 'A'
                && scope.row.order.changeStatus == 'A'">
                    <el-button
                        size="mini"
                        @click="toRefund(scope.row.order.dataId)">退票
                  </el-button>
                  <el-button
                      size="mini"
                      @click="handlerChange(scope.row)">改期
                  </el-button>
                </span>

                    <span v-if=" (scope.row.order.oStatus) =='A' && (scope.row.order.changeStatus)!='A'">
                       <el-button
                           size="mini"
                           @click="toRefund(scope.row.order.dataId)">退票
                  </el-button>
                        <span style="font-size: 10px" class="ml-3"> {{ changeStatusFormatter(scope.row.order.changeStatus) }}</span>
                    </span>
                    <span style="font-size: 10px"  v-if="(scope.row.order.oStatus)!='A'">
                     {{ oStatusFormatter(scope.row.order.oStatus) }}
                   </span>
                  </template>
                </el-table-column>

              </el-table>
              <el-empty :image-size="200" v-else description="还没有订单数据"></el-empty>

              <div style="display: flex; width: 100%; justify-content: end; margin-top: 20px;">
                <el-pagination
                    v-if="total > 0"
                    background
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
              </div>
              <!--      改期模态框      -->
              <el-dialog
                  title="申请改期"
                  :visible.sync="dialogChangeVisible"
                  width="22%"
              >
                <el-form :inline="true">
                  <el-form-item label="改期时间" style="margin-top: 12px;margin-left: 40px;margin-bottom: 0px">
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="changeBody.when"
                        type="date"
                        :picker-options="pickerOptions"
                        placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="改期理由" style="margin-left: 40px;margin-bottom: 0px">
                    <el-input v-model="changeBody.remark" placeholder="请输入改期理由" style="width: 113%"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogChangeVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handlerFlightChange">确 定</el-button>
                    </span>
              </el-dialog>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>

import {getFlightOrder, refund, change} from "@/api/order";
import MemberMenu from "@/views/components/MemberMenu";

let today = new Date(
    Date.UTC(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
    )
)
    .toISOString()
    .slice(0, 10);
export default {
  name: "OrderComponent",
  dicts: ['order_status', 'change_status', 'chargeback_status', 'aircraft_model', 'flight_class'],
  data() {
    return {
      dialogChangeVisible: false,
      dialogRefundVisible: false,
      total: 0,
      orderData: [],
      loading: false,
      flight: {},
      refundBody: {
        dataId: "",
        remark: ""
      },
      changeBody: {
        flightNumber: null,
        from: null,
        to: null,
        when: today,
        orderDataId: null,
        startTime: null,
        endTime: null,
        economySeatRemainderCount: null,
        businessSeatRemainderCount: null,
        headSeatRemainderCount: null,
        remark: null,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 日期可选
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 8.64e7;
        },
      },
    }
  },
  components: {
    MemberMenu
  },
  mounted() {
    this.getFlightOrder()
  },
  methods: {
    // 改签状态格式化器
    changeStatusFormatter(val) {
      return this.selectDictLabel(this.dict.type.change_status, val)
    },
    // 订单状态格式化器
    oStatusFormatter(val) {
      return this.selectDictLabel(this.dict.type.order_status, val)
    },
    // 飞机型号格式化器
    aircraftModelFormatter(val) {
      return this.selectDictLabel(this.dict.type.aircraft_model, val)
    },
    // 舱位格式化器
    flightClassFormatter(val) {
      return this.selectDictLabel(this.dict.type.flight_class, val)
    },
    // 时间格式化器
    dateTimeFormatter(val) {
      const arr = val.split("T");
      return arr[0] + " " + arr[1];
    },
    getFlightOrder() {
      getFlightOrder(this.queryParams).then((res) => {
        console.log(res.rows)
        this.orderData = res.rows;
        this.total = res.total
      })
    },
    handlerRefund() {
      refund(this.refundBody).then((res) => {
        this.$message({
          type: 'success',
          message: res.msg
        });
        this.getFlightOrder()
      })
    },
    toRefund(dataId) {
      this.refundBody.dataId = dataId
      this.refundConfirm()
    },
    refundConfirm() {
      this.$confirm('确定要退票吗', '退票', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handlerRefund();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '退票取消'
        });
      });
      this.dialogChangeVisible = false
    },
    // 改期按钮
    handlerChange(row) {
      this.dialogChangeVisible = true
      this.changeBody.from = row.flightSchedule.startStation
      this.changeBody.to = row.flightSchedule.endStation
      this.changeBody.flightNumber = row.flightSchedule.flightNumber
      this.changeBody.orderDataId = row.order.dataId
    },
    // 改期操作
    handlerFlightChange() {
      change(this.changeBody).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.getFlightOrder()
        this.dialogChangeVisible = false
      })
    },
  },
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
